<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>从化绿波</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .run-road {
      width: 100vw;
      height: 100vh;
      padding: 16px;
      box-sizing: border-box;
      font-size: 14px;
      /* overflow: hidden; */
      /* background-color: red; */
    }

    .primary-btn,
    .cancel-btn {
      border: none;
      cursor: pointer;
      background-color: #409eff;
      color: #fff;
      padding: 8px 16px;
      /* margin: 0 4px; */
      border-radius: 4px;
      text-align: center;
      font-weight: 600;
      min-width: 60px;
    }

    .cancel-btn {
      color: #909399;
      background-color: #f4f4f5;
      border: 1px solid #d3d4d6;
    }

    .start-btn {
      width: 100%;
    }

    table,
    th,
    td {
      border: 1px solid rgba(0, 0, 0);
      /** #ebeef5 */
      border-collapse: collapse;
      /* 消除双边框效果 */
      color: #606266;
    }

    th,
    td {
      padding: 4px;
    }

    .center {
      text-align: center;
    }

    input,
    select {
      height: 32px;
      background-color: #fff;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      padding: 0 10px;
    }

    input:focus-visible,
    select:focus-visible {
      outline: none;
      border-color: #409eff;
    }

    /* 待运行相关UI */
    .to-be-run {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 50px 0;
    }

    .to-be-title {
      font-weight: 700;
      font-size: 16px;
      text-align: center;
    }

    .run-model {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .run-model-list {
      width: 100%;
      display: flex;
      justify-content: space-around;
    }

    .run-model-child {}

    .run-model-item {
      display: flex;
      align-items: center;
    }

    /* 待运行相关UI */

    /* 运行中相关UI */
    .running-road {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .run-road-list {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .current-road {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      position: relative;
    }

    .current-road .ss-name {
      font-weight: 700;
      font-size: 50px;
      text-align: center;
      padding-bottom: 100px;
    }

    .go-road {
      width: 160px;
      height: 160px;
      background-color: green;
      border-radius: 50%;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 80px;
      line-height: 160px;
      position: relative;
    }

    .pass-time {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 14px;
      font-weight: 400;
      width: 100%;
      padding: 20px;
    }

    .has-pass {
      font-size: 20px;
      font-weight: 700;
      color: green;
      margin-top: 20px;
    }

    .stop-road {
      width: 60px;
      height: 60px;
      background-color: red;
      border-radius: 50%;
      text-align: center;
      color: #fff;
      font-weight: 700;
      font-size: 60px;
      line-height: 55px;
      position: relative;
    }

    .stop-number {
      width: 30px;
      height: 30px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      right: -20px;
      top: -20px;
      font-size: 16px;
      line-height: 30px;
    }

    .stop-time {
      position: absolute;
      right: 0;
      top: 80%;
    }

    .next-name {
      text-align: center;
      background-color: #ccc;
      line-height: 50px;
    }

    .footer-btn {
      display: flex;
      margin-top: 30px;
      padding-bottom: 10px;
    }

    .reverse-btn {
      flex: 3;
    }

    .check-btn {
      flex: 1;
    }

    .last-cross {
      text-align: center;
      color: red;
    }

    .disabled-time {
      background-color: #ccc;
    }

    .copy-msg {
      position: absolute;
    }

    /* 运行中相关UI */

    /* 表格展示相关UI */
    .table-show {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .table-show .footer-btn {
      flex: 0 0 20px;
      margin-bottom: 0;
      margin-top: 10px;
    }

    .table-show .table-content {
      flex: 1;
      overflow: auto;
    }

    /* .time-show {
      padding: 4px 0;
    } */

    .table-tab {
      display: flex;
      /* justify-content: center; */
      margin-bottom: 4px;
      border-bottom: 2px solid #ccc;
      /* padding-bottom: 4px; */
    }

    .table-tab-item {
      padding: 0 10px 8px 10px;
      font-weight: 600;
    }

    .active-tab-item {
      color: #409eff;
      border-bottom: 2px solid #409eff;
    }

    .common-title {
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      color: #191B24;
      margin-bottom: 20px;
      /* width: 100%; */
      /* text-align: right; */

      &::before {
        content: ' ';
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #489ffc;
        border-radius: 50%;
        position: relative;
        top: 0;
        margin-right: 10px;
      }
    }

    /* 表格展示相关UI */
  </style>
</head>

<body>
  <div id="app" class="run-road">
    <div v-if="pageType === PAGE_TYPE.BE_RUN" class="to-be-run">
      <div class="to-be-title">待出发</div>
      <div class="run-model">
        <div class="common-title">
          路段选择
        </div>
        <div class="run-model-list">
          <div class="run-model-child">
            <div v-for="item in runRailwayList" class="run-model-item" @click="runRailway = item.label">
              <input type="radio" :id="item.label" name="runRailway" :value="item.label"
                :checked="runRailway === item.label" />
              &nbsp;&nbsp;{{item.label}}
            </div>
          </div>
        </div>
      </div>
      <div class="run-model">
        <div class="common-title">
          模式选择
        </div>
        <div class="run-model-list">
          <div class="run-model-child">
            <div v-for="item in modelList" class="run-model-item" @click="runModel = item.label">
              <input type="radio" :id="item.label" name="runModel" :value="item.label"
                :checked="runModel === item.label" />
              &nbsp;&nbsp;{{item.label}}
            </div>
          </div>
          <div class="run-model-child">
            <div v-for="item in modelTypeList" class="run-model-item" @click="handleChangeModelType(item)">
              <input type="radio" :id="item.label" name="runModelType" :name="item.label" :value="item.label"
                :disabled="isNoOptimize" :checked="runModelType === item.label" />
              &nbsp;&nbsp;{{item.label}}
            </div>
          </div>
        </div>
      </div>
      <button @click="handleGoing" class="primary-btn start-btn">出发</button>
    </div>
    <div v-if="pageType === PAGE_TYPE.RUNNING" class="running-road">
      <div class="to-be-title" style="margin-bottom: 10px;">
        方向：{{directionList[currentDir].value}}
      </div>
      <div class="run-road-list" v-if="runRoad.length > 0">
        <div v-for="(item, index) in runRoad" :key="item.ssId" class="run-road-item"
          :class="{'current-road': item.ssId === roadConfig[currentDir]?.[currentRoadIndex]?.ssId}">
          <template v-if="item.ssId === roadConfig[currentDir]?.[currentRoadIndex]?.ssId">
            <div class="ss-name">
              {{item.ssId}}
              <div class="pass-time">
                <div>
                  {{item.name}}
                </div>
                <div class="has-pass" v-if="item.passTime">
                  路过时间：{{item.passTime}}
                </div>
              </div>
            </div>
            <div class="go-road" :class="isClickPass ? 'disabled-time' : ''" @click="handleGoCross">
              ✔
            </div>
            <div class="stop-road" :class="isClickStop ? 'disabled-time' : ''" @click="handleStop">
              ×
              <div v-if="item.stopTime.length > 0" class="stop-number">{{item.stopTime.length}}</div>
            </div>
            <div class="reset-road">
              <button class="cancel-btn" @click="handleResetRoad">重置当前路口</button>
            </div>
            <template v-if="currentRoadIndex === baseRoad.length - 1">
              <div class="last-cross">提示：这是最后一个路口</div>
            </template>
          </template>
          <template v-else>
            <div class="next-name" @click="handleChangeRoad(index)">
              {{index === 0 ? '上' : '下'}}一个路口:{{item.ssId}}
            </div>
          </template>
        </div>
      </div>
      <div class="footer-btn">
        <button class="primary-btn check-btn" @click="handleView">查看</button>
        <button class="primary-btn reverse-btn" style="margin-left: 10px;" @click="handleReverse">反向</button>
      </div>
    </div>
    <div v-if="pageType === PAGE_TYPE.SHOW" class="table-show">
      <div class="table-tab">
        <div v-for="item in tableTabList" :key="item.value" class="table-tab-item" @click="activeTab = item.value"
          :class="activeTab === item.value ? 'active-tab-item' : ''">
          {{item.label}}
        </div>
      </div>
      <div class="table-content">
        <!-- 时间表 -->
        <table style="width: 100%;" v-if="activeTab === 'stopNum'">
          <tr class="center">
            <th colspan="2">路段</th>
            <th colspan="4">{{ runRailway }}</th>
          </tr>
          <tr class="center">
            <th colspan="2">时间</th>
            <th colspan="4">{{ startTime }}</th>
          </tr>
          <tr class="center">
            <th colspan="2">模式</th>
            <th colspan="4">{{runModel}}{{runModelType}}</th>
          </tr>
          <tr class="center">
            <th colspan="2">方向</th>
            <th colspan="2" v-for="item in directionList">{{item.value}}</th>
          </tr>
          <tr class="center">
            <th colspan="2">路段用时</th>
            <th colspan="2">
              {{getRoadUseTime(directionList.forward.key).useTime}}
              <span>
                ({{getRoadUseTime(directionList.forward.key).resultTime}}分)
              </span>
            </th>
            <th colspan="2">
              {{getRoadUseTime(directionList.reverse.key).useTime}}
              <span>
                ({{getRoadUseTime(directionList.reverse.key).resultTime}}分)
              </span>
            </th>
          </tr>
          <tr class="center">
            <th>序号</th>
            <th>路口</th>
            <th>经过时间</th>
            <th>停车次数</th>
            <th>经过时间</th>
            <th>停车次数</th>
          </tr>
          <tr class="center" v-for="(item, index) in baseRoad">
            <td>{{index + 1}}</td>
            <td>{{item.ssId}}</td>
            <td class="forward-bg">
              <template
                v-if="currentRoad(item.ssId, directionList.forward.key).data.arriveTime && currentRoad(item.ssId, directionList.forward.key).data.arriveTime !== currentRoad(item.ssId, directionList.forward.key).data.passTime">
                {{currentRoad(item.ssId, directionList.forward.key).data.arriveTime}}<br />
                {{currentRoad(item.ssId, directionList.forward.key).data.passTime}}
              </template>
              <template v-else>
                {{currentRoad(item.ssId, directionList.forward.key).data.passTime}}
              </template>
            </td>
            <td class="forward-bg">{{currentRoad(item.ssId, directionList.forward.key).data.stopTime.length}}</td>
            <td>
              <template
                v-if="currentRoad(item.ssId, directionList.reverse.key).data.arriveTime && currentRoad(item.ssId, directionList.reverse.key).data.arriveTime !== currentRoad(item.ssId, directionList.reverse.key).data.passTime">
                {{currentRoad(item.ssId, directionList.reverse.key).data.arriveTime}}<br />{{currentRoad(item.ssId,
                directionList.reverse.key).data.passTime}}
              </template>
              <template v-else>
                {{currentRoad(item.ssId, directionList.reverse.key).data.passTime}}
              </template>
            </td>
            <td>{{currentRoad(item.ssId, directionList.reverse.key).data.stopTime.length}}</td>
          </tr>
        </table>

        <!-- 速度表 -->
        <table style="width: 100%;" v-else>
          <tr class="center">
            <th colspan="2">路段</th>
            <th colspan="4">{{ runRailway }}</th>
          </tr>
          <tr class="center">
            <th colspan="2">时间</th>
            <th colspan="4">{{ startTime }}</th>
          </tr>
          <tr class="center">
            <th colspan="2">模式</th>
            <th colspan="4">{{runModel}}{{runModelType}}</th>
          </tr>
          <tr class="center">
            <th colspan="2">方向</th>
            <th colspan="2" v-for="item in directionList">{{item.value}}</th>
          </tr>
          <tr class="center">
            <th colspan="2">平均速度</th>
            <th colspan="2">{{getAverageSpeed(directionList.forward.key)}} km/h</th>
            <th colspan="2">{{getAverageSpeed(directionList.reverse.key)}} km/h</th>
          </tr>
          <tr class="center">
            <th colspan="2">路段长度</th>
            <th colspan="2">{{getRoadLength(directionList.forward.key) / 1000}} km</th>
            <th colspan="2">{{getRoadLength(directionList.reverse.key) / 1000}} km</th>
          </tr>
          <tr class="center">
            <th colspan="2">路段用时</th>
            <th colspan="2">
              {{getRoadUseTime(directionList.forward.key).useTime}}
              <span>
                ({{getRoadUseTime(directionList.forward.key).resultTime}}分)
              </span>
            </th>
            <th colspan="2">
              {{getRoadUseTime(directionList.reverse.key).useTime}}
              <span>
                ({{getRoadUseTime(directionList.reverse.key).resultTime}}分)
              </span>
            </th>
          </tr>
          <tr class="center">
            <td>序号</td>
            <td>路口</td>
            <td>经过时间</td>
            <td>速度(km/h)</td>
            <td>经过时间</td>
            <td>速度(km/h)</td>
          </tr>
          <tr class="center" v-for="(item, index) in baseRoad">
            <td>{{index + 1}}</td>
            <td>{{item.ssId}}</td>
            <td class="forward-bg">
              <template
                v-if="currentRoad(item.ssId, directionList.forward.key).data.arriveTime && currentRoad(item.ssId, directionList.forward.key).data.arriveTime !== currentRoad(item.ssId, directionList.forward.key).data.passTime">
                {{currentRoad(item.ssId, directionList.forward.key).data.arriveTime}}<br />{{currentRoad(item.ssId,
                directionList.forward.key).data.passTime}}
              </template>
              <template v-else>
                {{currentRoad(item.ssId, directionList.forward.key).data.passTime}}
              </template>
            </td>
            <td class="forward-bg">{{getCurrentRoadSpeed(item.ssId, directionList.forward.key)}}</td>
            <td>
              <template
                v-if="currentRoad(item.ssId, directionList.reverse.key).data.arriveTime && currentRoad(item.ssId, directionList.reverse.key).data.arriveTime !== currentRoad(item.ssId, directionList.reverse.key).data.passTime">
                {{currentRoad(item.ssId, directionList.reverse.key).data.arriveTime}}<br />{{currentRoad(item.ssId,
                directionList.reverse.key).data.passTime}}
              </template>
              <template v-else>
                {{currentRoad(item.ssId, directionList.reverse.key).data.passTime}}
              </template>
            </td>
            <td>{{getCurrentRoadSpeed(item.ssId, directionList.reverse.key)}}</td>
          </tr>
        </table>
      </div>
      <div class="footer-btn">
        <button class="primary-btn reverse-btn" style="margin-right: 10px;" @click="handleContinue">继续前进</button>
        <button class="primary-btn reverse-btn" style="margin-right: 10px;" @click="handleCopy">复制内容</button>
        <button class="primary-btn reverse-btn" @click="handleRetry">重新开始</button>
      </div>
    </div>
  </div>
</body>
<script type="module">
  import { createApp, ref, nextTick, reactive, onMounted, onUnmounted, computed, watch } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  const app = createApp({
    setup() {

      // 路段选择列表
      const runRailwayList = [
        { key: 'cadd', label: '城鳌大道' },
        { key: 'xcl', label: '兴从路' }
      ]

      // 模式列表
      const modelList = [
        { key: 'gdzy', label: '自研' },
        { key: 'zyyk', label: '振业' },
        { key: 'zbsf', label: '兆边' },
        { key: 'gdzq', label: '固定周期' },
        { key: 'zsy', label: '自适应' },
      ]

      // 优化的静态和动态
      const modelTypeList = [
        { key: 'static', label: '静态算法' },
        { key: 'dynamic', label: '动态算法' },
      ]

      // 运行方向
      const directionList = {
        'forward': { key: 'forward', value: '东 -> 西' },
        'reverse': { key: 'reverse', value: '西 -> 东' },
      }

      // 表格列表
      const tableTabList = [
        { label: '停车次数', value: 'stopNum' },
        { label: '平均速度', value: 'averageSpeed' }
      ]

      const activeTab = ref(tableTabList[0].value)
      const currentDir = ref(directionList.forward.key)

      // 当前路口索引
      const currentRoadIndex = ref(0)

      const PAGE_TYPE = {
        'BE_RUN': 'BE_RUN',
        'RUNNING': 'RUNNING',
        'SHOW': 'SHOW'
      }
      // 是否已经启动
      const pageType = ref(PAGE_TYPE.BE_RUN)

      const runModel = ref(modelList[0].label)
      const runModelType = ref(modelTypeList[0].label)
      const runRailway = ref(runRailwayList[0].label)
      // 路段基本信息
      const caddBaseRoad = [
        // { ssId: 101, passTime: '', arriveTime: '', stopTime: [], reverseLen: 2382, forwardLen: 0, name: 'G105（环市东路）-G355（从城大道）交叉路口' },
        // { ssId: 615, passTime: '', arriveTime: '', stopTime: [], reverseLen: 651, forwardLen: 2382, name: 'G355（从城大道）-青云路交叉路口' },
        // { ssId: 614, passTime: '', arriveTime: '', stopTime: [], reverseLen: 1505, forwardLen: 652, name: 'G355（从城大道）-口岸路交叉路口' },
        { ssId: 614, passTime: '', arriveTime: '', stopTime: [], reverseLen: 1505, forwardLen: 0, name: 'G355（从城大道）-口岸路交叉路口' },
        { ssId: 613, passTime: '', arriveTime: '', stopTime: [], reverseLen: 1030, forwardLen: 1498, name: 'G355（从城大道）-钱隆公馆过街路口' },
        { ssId: 612, passTime: '', arriveTime: '', stopTime: [], reverseLen: 933, forwardLen: 1016, name: 'G355（城鳌大道）-从城大道-旺城大道' },
        { ssId: 618, passTime: '', arriveTime: '', stopTime: [], reverseLen: 988, forwardLen: 958, name: 'G355（城鳌大道）-大广高速从化出入口交叉路口' },
        { ssId: 619, passTime: '', arriveTime: '', stopTime: [], reverseLen: 877, forwardLen: 999, name: 'G355（城鳌大道）-华林路（石合村路口）' },
        { ssId: 620, passTime: '', arriveTime: '', stopTime: [], reverseLen: 1550, forwardLen: 868, name: 'G355（城鳌大道）-明珠大道南（明珠工业园路口）' },
        { ssId: 501, passTime: '', arriveTime: '', stopTime: [], reverseLen: 937, forwardLen: 1553, name: 'G355（城鳌大道东）-岭南街（鳌头岭南小学旁）K1029+330' },
        { ssId: 502, passTime: '', arriveTime: '', stopTime: [], reverseLen: 1014, forwardLen: 931, name: 'G355（城鳌大道东）-横坑村道交汇处（广州华夏学院东）K1030+390' },
        { ssId: 503, passTime: '', arriveTime: '', stopTime: [], reverseLen: 1717, forwardLen: 1022, name: 'G355（城鳌大道）-新隅路（棋杆墟路口）' },
        { ssId: 504, passTime: '', arriveTime: '', stopTime: [], reverseLen: 948, forwardLen: 1716, name: 'G355（城鳌大道东）-万宝工业园东门K1033+100' },
        { ssId: 505, passTime: '', arriveTime: '', stopTime: [], reverseLen: 1959, forwardLen: 947, name: 'G355（城鳌大道东）-大氹村K1034+100' },
        { ssId: 506, passTime: '', arriveTime: '', stopTime: [], reverseLen: 1813, forwardLen: 1954, name: 'G355（城鳌大道）-X285县道（鳌头神棋路口）' },
        { ssId: 507, passTime: '', arriveTime: '', stopTime: [], reverseLen: 479, forwardLen: 1805, name: 'G355（城鳌大道东）-Y629（中塘村）（中塘村路口）K1037+840 ' },
        { ssId: 508, passTime: '', arriveTime: '', stopTime: [], reverseLen: 2237, forwardLen: 481, name: 'G355（城鳌大道）-人和路（人和市场路口）' },
        { ssId: 510, passTime: '', arriveTime: '', stopTime: [], reverseLen: 0, forwardLen: 2237, name: 'G355（城鳌大道东）-S355（城鳌大道西）-鳌丁公路交汇处（象新路口）K1040+565 ' },
        // { ssId: 510, passTime: '', arriveTime: '', stopTime: [], reverseLen: 514, forwardLen: 2237, name: 'G355（城鳌大道东）-S355（城鳌大道西）-鳌丁公路交汇处（象新路口）K1040+565 ' },
        // { ssId: 511, passTime: '', arriveTime: '', stopTime: [], reverseLen: 2379, forwardLen: 511, name: 'G355（城鳌大道）-前进路（鳌头十字路口）' },
        // { ssId: 517, passTime: '', arriveTime: '', stopTime: [], reverseLen: 0, forwardLen: 2411, name: 'G355（城鳌大道）-G106国道（聚丰北路）-G106(龙潭大道）（西瓜地路口）' },
      ]

      const xclBaseRoad = [
        // { ssId: 628, passTime: '', arriveTime: '', stopTime: [], reverseLen: 293, forwardLen: 0, name: '兴丛路-河滨北路(从化区新法院路口)' },
        // { ssId: 629, passTime: '', arriveTime: '', stopTime: [], reverseLen: 387, forwardLen: 291, name: '兴从路-文体路路口' },
        { ssId: 629, passTime: '', arriveTime: '', stopTime: [], reverseLen: 387, forwardLen: 0, name: '兴从路-文体路路口' },
        { ssId: 630, passTime: '', arriveTime: '', stopTime: [], reverseLen: 561, forwardLen: 385, name: '兴丛路-从化大道路口' },
        { ssId: 631, passTime: '', arriveTime: '', stopTime: [], reverseLen: 574, forwardLen: 597, name: '兴从路-向阳大道路口' },
        { ssId: 632, passTime: '', arriveTime: '', stopTime: [], reverseLen: 673, forwardLen: 572, name: '兴从路-府前路路口' },
        { ssId: 633, passTime: '', arriveTime: '', stopTime: [], reverseLen: 397, forwardLen: 669, name: '兴从路-环市路路口(城新路)' },
        { ssId: 634, passTime: '', arriveTime: '', stopTime: [], reverseLen: 608, forwardLen: 391, name: '兴丛路-和呜路路口' },
        { ssId: 635, passTime: '', arriveTime: '', stopTime: [], reverseLen: 0, forwardLen: 604, name: '兴从路-八乡大道路口' },
      ]

      const baseRoad = computed(() => {
        let data = JSON.parse(JSON.stringify(caddBaseRoad))
        if (runRailway.value === '兴从路') {
          data = JSON.parse(JSON.stringify(xclBaseRoad))
        }
        return data
      })
      // 路口配置信息
      const roadConfig = reactive({
        [directionList.forward.key]: [],
        [directionList.reverse.key]: []
      })

      // 初始化路段配置信息
      const initRoadConfig = () => {
        roadConfig[directionList.forward.key] = JSON.parse(JSON.stringify(baseRoad.value)),
          roadConfig[directionList.reverse.key] = JSON.parse(JSON.stringify(baseRoad.value)).reverse()
      }

      // 当前路口的方案信息
      const currentRoad = (ssId, type) => {
        const data = roadConfig[type].find(item => item.ssId === ssId)
        const index = roadConfig[type].findIndex(item => item.ssId === ssId)
        return {
          data, index
        }
      }

      // 时间转换为数字  用于计算速度
      const timeToNumber = (time) => {
        const timeArr = time.split(':')
        const number = Number(timeArr[0]) * 60 * 60 + Number(timeArr[1]) * 60 + Number(timeArr[2])
        return number
      }

      // 数字转换为时间 用于界面展示
      const numberToTime = (number) => {
        const hour = Math.floor(number / 3600)
        const min = Math.floor((number - hour * 3600) / 60)
        const sec = number - hour * 3600 - min * 60
        return `${addZero(hour)}:${addZero(min)}:${addZero(sec)}`
      }

      // 获取当前路段的速度
      const getCurrentRoadSpeed = (ssId, dir) => {
        const data = currentRoad(ssId, dir).data
        const index = currentRoad(ssId, dir).index
        const startIndex = directionList.forward.key ? index - 1 : index + 1
        let speed = '-'
        if (!data[`${dir}Len`]) {
          speed = '-'
        }
        else {
          const endTime = timeToNumber(data.passTime)
          const startTime = roadConfig[dir]?.[startIndex]?.passTime ?? 0
          if (startTime) {
            const timeDiff = endTime - timeToNumber(startTime)
            if (!isNaN(timeDiff) && timeDiff > 0) {
              speed = Math.abs(Math.round(data[`${dir}Len`] / timeDiff * 3.6))
            }
          }
        }
        return speed
      }

      // 获取路段的时间
      const getRoadUseTime = (dir) => {
        const timeList = roadConfig[dir].map(item => timeToNumber(item.passTime)).filter(item => !isNaN(item))
        if (timeList.length === 0) return { timeStep: 0, resultTime: 0 }
        const minTime = Math.min(...timeList)
        const maxTime = Math.max(...timeList)
        // 的秒数，用于计算速度
        const timeStep = maxTime - minTime
        const useTime = numberToTime(timeStep)
        const timeSplit = useTime.split(':')
        const originTime = timeSplit[0] * 60 + Number(timeSplit[1]) + timeSplit[2] / 60
        // 转换成小数点的方式
        const resultTime = Math.round(originTime * 100) / 100
        return { timeStep, resultTime, useTime }
      }

      // 获取路段总长度
      const getRoadLength = (dir) => {
        let length = 0
        roadConfig[dir].forEach((item, index) => {
          length += item[`${dir}Len`]
        })
        return length
      }

      // 计算平均速度
      const getAverageSpeed = (dir) => {
        const totalLen = getRoadLength(dir)
        const totalTime = getRoadUseTime(dir).timeStep
        let speed = totalTime ? Math.round(totalLen / totalTime * 3.6) : '-'
        return speed
      }

      // 运行中的路口信息
      const runRoad = computed(() => {
        let list = roadConfig[currentDir.value].filter((item, index) => {
          return index >= currentRoadIndex.value - 1 && index <= currentRoadIndex.value + 1
        })
        return list || []
      })

      // 是否非优化模式 
      // 非优化模式下不用选择静态和动态
      const isNoOptimize = computed(() => {
        return ['固定周期', '自适应'].includes(runModel.value)
      })

      watch(() => runModel.value, (val) => {
        if (isNoOptimize.value) {
          runModelType.value = ''
        }
        else {
          runModelType.value = runModelType.value || modelTypeList[0].label
        }
      })

      const handleChangeModelType = (item) => {
        if (isNoOptimize.value) {
          return
        }
        runModelType.value = item.labe
      }

      let isClickPass = ref(false)
      // 路过当前路口
      const handleGoCross = () => {
        const currentTime = getCurrentTime().time
        roadConfig[currentDir.value][currentRoadIndex.value].passTime = currentTime
        setSession()
        // 第一次的路过时间记录为到达路口时间
        // if (!roadConfig[currentDir.value][currentRoadIndex.value].arriveTime) {
        //   roadConfig[currentDir.value][currentRoadIndex.value].arriveTime = currentTime
        // }
        if (currentRoadIndex.value >= baseRoad.value.length - 1) return
        currentRoadIndex.value++
      }

      const startTime = ref('')
      // 出发
      const handleGoing = () => {
        initRoadConfig()
        pageType.value = PAGE_TYPE.RUNNING
        startTime.value = getCurrentTime().fullData
        setSession()
      }

      // 继续运行
      const handleContinue = () => {
        pageType.value = PAGE_TYPE.RUNNING
        setSession()
      }
      // 查看方案
      const handleView = () => {
        pageType.value = PAGE_TYPE.SHOW
        setSession()
      }

      let isClickStop = ref(false)
      // 在当前路口停留
      const handleStop = () => {
        if (isClickStop.value) return
        isClickStop.value = true
        const currentTime = getCurrentTime().time
        roadConfig[currentDir.value][currentRoadIndex.value].stopTime.push(currentTime)
        // 第一次的停车时间记录为达到时间
        if (!roadConfig[currentDir.value][currentRoadIndex.value].arriveTime) {
          roadConfig[currentDir.value][currentRoadIndex.value].arriveTime = currentTime
        }
        setSession()
        setTimeout(() => {
          isClickStop.value = false
        }, 3000)

      }

      // 获取当前时间
      const getCurrentTime = () => {
        const time = new Date()
        const year = time.getFullYear()
        const month = time.getMonth() + 1
        const day = time.getDate()
        const hour = time.getHours()
        const min = time.getMinutes()
        const sec = time.getSeconds()
        return {
          fullData: `${year}-${addZero(month)}-${addZero(day)} ${addZero(hour)}:${addZero(min)}:${addZero(sec)}`,
          time: `${addZero(hour)}:${addZero(min)}:${addZero(sec)}`
        }
      }

      // 时间补零
      const addZero = (num) => {
        return num < 10 ? `0${num}` : num
      }

      // 设置sessionStorage
      const setSession = () => {
        window.localStorage.setItem('roadConfig', JSON.stringify(roadConfig)) //roadConfig))
        window.localStorage.setItem('currentRoadIndex', currentRoadIndex.value)
        window.localStorage.setItem('currentDir', currentDir.value)
        window.localStorage.setItem('startTime', startTime.value)//startTime.value)
        window.localStorage.setItem('pageType', pageType.value)
        window.localStorage.setItem('runModel', runModel.value)
        window.localStorage.setItem('runModelType', runModelType.value)
        window.localStorage.setItem('runRailway', runRailway.value)
      }

      // 清除缓存
      const clearSession = () => {
        window.localStorage.clear()
      }

      // 获取sessionStorage
      const getSession = () => {
        const roadConfigStr = window.localStorage.getItem('roadConfig')
        const currentRoadIndexStr = window.localStorage.getItem('currentRoadIndex')
        const currentDirStr = window.localStorage.getItem('currentDir')
        const startTimeStr = window.localStorage.getItem('startTime')
        const pageTypeStr = window.localStorage.getItem('pageType')
        const runModelStr = window.localStorage.getItem('runModel')
        const runModelTypeStr = window.localStorage.getItem('runModelType')
        const runRailwayStr = window.localStorage.getItem('runRailway')
        if (roadConfigStr) {
          const data = JSON.parse(roadConfigStr)
          for (let i in directionList) {
            roadConfig[i] = data[i]
            // data[i].forEach(ele => {
            //   roadConfig[i].forEach((item, index) => {
            //     if (ele.ssId === item.ssId) {
            //       item.passTime = ele?.passTime ?? ''
            //       item.stopTime = ele?.stopTime ?? []
            //       item.arriveTime = ele?.arriveTime ?? []
            //     }
            //   })
            // })
          }
        }
        if (currentRoadIndexStr) {
          currentRoadIndex.value = Number(currentRoadIndexStr)
        }
        if (currentDirStr) {
          currentDir.value = currentDirStr
        }
        if (startTimeStr) {
          startTime.value = startTimeStr
        }
        if (pageTypeStr) {
          pageType.value = pageTypeStr
        }
        if (runModelStr) {
          runModel.value = runModelStr || modelList[0].label
        }
        if (runModelTypeStr) {
          runModelType.value = runModelTypeStr || modelTypeList[0].label
        }
        if (runRailwayStr) {
          runRailway.value = runRailwayStr || runRailwayList[0].label
        }
      }

      // 路口跳转
      const handleChangeRoad = (index) => {
        currentRoadIndex.value = index === 0 ? currentRoadIndex.value - 1 : currentRoadIndex.value + 1
        setSession()
      }

      // 点击反转
      const handleReverse = () => {
        currentDir.value = currentDir.value === directionList.forward.key ? directionList.reverse.key : directionList.forward.key
        currentRoadIndex.value = 0
        setSession()
      }

      // 重置当前方案信息
      const handleRetry = () => {
        const result = confirm('重新开始原方案会被清除，是否重新开始?')
        if (!result) return
        pageType.value = PAGE_TYPE.BE_RUN
        clearSession()
        currentRoadIndex.value = 0
        currentDir.value = directionList.forward.key
        initRoadConfig()
        startTime.value = ''
      }

      // 重置当前路口信息
      const handleResetRoad = () => {
        roadConfig[currentDir.value][currentRoadIndex.value].passTime = ''
        roadConfig[currentDir.value][currentRoadIndex.value].stopTime = []
        roadConfig[currentDir.value][currentRoadIndex.value].arriveTime = ''
      }

      const handleCopy = () => {
        getSession()
        const params = {
          roadConfig,
          startTime: startTime.value,
          runModel: runModel.value,
          runModelType: runModelType.value
        }

        const textarea = document.createElement('textarea');
        textarea.setAttribute('readonly', 'readonly');
        textarea.value = JSON.stringify(params)
        document.body.appendChild(textarea);
        textarea.select();
        if (document.execCommand) {
          document.execCommand('copy');
          alert('内容复制成功，可将内容粘贴至微信');
        }
        document.body.removeChild(textarea);
      }

      onMounted(() => {
        initRoadConfig()
        getSession()
      })

      return {
        pageType,
        roadConfig,
        currentRoadIndex,
        runRoad,
        currentDir,
        directionList,
        PAGE_TYPE,
        startTime,
        baseRoad,
        runModel,
        runModelType,
        isClickPass,
        isClickStop,
        modelList,
        modelTypeList,
        tableTabList,
        activeTab,
        isNoOptimize,
        runRailwayList,
        runRailway,
        currentRoad,
        handleGoCross,
        handleStop,
        handleChangeRoad,
        handleReverse,
        handleGoing,
        handleView,
        handleRetry,
        handleContinue,
        handleResetRoad,
        handleCopy,
        getCurrentRoadSpeed,
        getAverageSpeed,
        getRoadUseTime,
        getRoadLength,
        handleChangeModelType
      }
    },
  })
  app.mount("#app");
</script>

</html>